<template>
  <el-container>
    <el-main>
      <el-card class="info-card">
        <div slot="header">
          <el-row type="flex" justify="space-between" align="middle">
            <el-col :span="12">
              <h3 style="margin: 0">应急信息</h3>
            </el-col>
            <el-col :span="12">
              <el-input
                v-model="searchKeyword"
                placeholder="搜索应急信息"
                clearable>
                <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
              </el-input>
            </el-col>
          </el-row>
        </div>

        <!-- 信息列表 -->
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in infoList"
            :key="index"
            :timestamp="item.publishTime"
            placement="top"
            :type="getTimelineItemType(item)">
            <el-card>
              <h4>{{ item.title }}</h4>
              <p class="info-content">{{ item.content }}</p>
              <div class="info-footer">
                <el-tag size="small">有效期至：{{ item.validTime }}</el-tag>
                <el-tag 
                  size="small"
                  :type="item.level === '紧急' ? 'danger' : 'warning'">
                  {{ item.level }}
                </el-tag>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>

        <!-- 加载更多 -->
        <div v-if="hasMore" class="load-more">
          <el-button type="text" @click="loadMore">
            加载更多<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'EmergencyInfo',
  data() {
    return {
      searchKeyword: '',
      infoList: [
        {
          title: '测试应急信息1',
          content: '这是一条测试应急信息内容',
          publishTime: '2024-03-18 10:00:00',
          validTime: '2024-03-19 10:00:00',
          level: '紧急'
        },
        {
          title: '测试应急信息2',
          content: '这是另一条测试应急信息内容',
          publishTime: '2024-03-18 09:00:00',
          validTime: '2024-03-19 09:00:00',
          level: '普通'
        }
      ],
      hasMore: true,
      page: 1,
      pageSize: 10
    }
  },
  methods: {
    handleSearch() {
      // 搜索方法
      console.log('搜索关键词：', this.searchKeyword)
    },
    loadMore() {
      // 加载更多数据
      this.page += 1
      // 调用加载数据的接口
    },
    getTimelineItemType(item) {
      // 根据信息级别返回不同的类型
      return item.level === '紧急' ? 'danger' : 'warning'
    }
  }
}
</script>

<style scoped>
.info-card {
  max-width: 800px;
  margin: 20px auto;
}
.info-content {
  margin: 10px 0;
  line-height: 1.6;
}
.info-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.load-more {
  text-align: center;
  margin-top: 20px;
}
.el-timeline-item {
  margin-bottom: 20px;
}
.el-card {
  margin-bottom: 10px;
}
</style> 